---
import Default from '../../layouts/Default.astro';
import Thread from '../../components/Thread.svelte'
import '../../styles/thread.css'
import '../../styles/blackbox.css?'
import type Thread from '../../models/Thread';

import { api } from '../../lib/api.ts';
import { processThreadIn } from '../../lib/thread'

const { board } = Astro.params;
const data = await api('get', `board/${board}`);

if(data.status === 404) return Astro.redirect('/404');

const threads: Thread[] = await data.json();
for(let thread of threads)
  await processThreadIn(board, thread);
---

<Default>
  <h1><a href="/boards"> {board} </a></h1>
  <div class="blackbox">
    <button style="left: 50%; position: relative; transform: translate(-50%, 0);" onclick=`window.location='/create/${board}'`>Create Thread</button>
  </div>

  {threads.map((thread) => (
    <Thread thread={thread} board={board} />
  ))}
</Default>

<style is:inline>
  :root {
    --wdt: 600px;
  }
</style>